<template>
  <div class="register-container">
    <!-- 注册内容 -->
    <div class="register">
      <h3>
        注册新用户
        <span class="go">我有账号，去
          <router-link to="/login">登陆</router-link>
        </span>
      </h3>

      <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="ruleForm">
        <el-form-item label="手机:" prop="phone">
          <el-input type="number" v-model="ruleForm.phone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="验证码:" prop="code" style="position: relative">
          <el-input type="number" v-model="ruleForm.code" autocomplete="off"></el-input>
          <el-button v-if="!sending" @click="getCode" class="getcode">{{
    getcode
}}</el-button>
          <el-button v-else disabled key="disabled" class="getcode disabled">
            {{ leftSecond }}秒后重发
          </el-button>
        </el-form-item>
        <el-form-item label="登录密码:" prop="pass">
          <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="确认密码:" prop="checkPass">
          <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item prop="agree" class="agree">
          <el-checkbox v-model="ruleForm.agree" label="同意协议并注册《尚品汇用户协议》"></el-checkbox>
        </el-form-item>
        <el-form-item>
          <button type="primary" @click="userRegister('ruleForm')" class="btn">
            完成注册
          </button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 底部 -->
    <div class="copyright">
      <ul>
        <li>关于我们</li>
        <li>联系我们</li>
        <li>联系客服</li>
        <li>商家入驻</li>
        <li>营销中心</li>
        <li>手机尚品汇</li>
        <li>销售联盟</li>
        <li>尚品汇社区</li>
      </ul>
      <div class="address">地址：北京市昌平区宏福科技园综合楼6层</div>
      CP备19006430号
    </div>
  </div>
</template>

<script>
export default {
  name: "Register",
  data() {
    var checkPhone = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入手机号码"));
      } else if (this.ruleForm.phone !== "") {
        let reg = /^[1][\d]{10}$/;
        if (reg.test(this.ruleForm.phone)) {
          callback();
        } else {
          callback(new Error("手机号格式不正确"));
        }
        // callback();
      }
    };
    var checkCode = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入验证码"));
      } else if (this.ruleForm.code !== "") {
        let reg = /^\d{6}$/;
        if (reg.test(this.ruleForm.code)) {
          callback();
        } else {
          callback(new Error("验证码格式不正确"));
        }
      }
    };
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else if (this.ruleForm.pass !== "") {
        let reg = /^[\W\da-zA-Z_]{6,20}$/;
        if (reg.test(this.ruleForm.pass)) {
          callback();
        } else {
          callback(new Error("密码需为6--20位数字、字母或任意字符组成"));
        }
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm.pass) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    var checkAgree = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请勾选同意协议"));
      } else {
        callback();
      }
    };
    return {
      ruleForm: {
        // 收集表单数据--手机号
        phone: "",
        // phone: 13711111111,
        //验证码
        code: "",
        //密码
        pass: "",
        //确认密码
        checkPass: "",
        //是否同意
        agree: false,
      },
      rules: {
        phone: [{ validator: checkPhone, trigger: "blur" }],
        code: [{ validator: checkCode, trigger: "change" }],
        pass: [{ validator: validatePass, trigger: "blur" }],
        checkPass: [{ validator: validatePass2, trigger: "blur" }],
        agree: [{ validator: checkAgree, trigger: "change" }],
      },
      leftSecond: 0,
      getcode: "获取验证码",
      sending: false,
    };
  },
  methods: {
    //获取验证码
    async getCode() {
      //简单判断一下---至少用数据
      try {
        //如果获取到验证码
        // phone && (await this.$store.dispatch("getCode", phone));
        let phone = this.ruleForm.phone;
        if (phone) {
          await this.$store.dispatch("getCode", phone);
          //倒计时
          this.sending = true;
          // this.leftSecond = 5;
          this.leftSecond = 60;
          if (this.getcode == "获取验证码") this.getcode = "重新获取";
          //创建定时器
          const timmer = setInterval(() => {
            console.log(this.leftSecond);
            //计数器减一
            this.leftSecond--;
            this.ruleForm.code = this.$store.state.user.code;

            if (this.leftSecond <= 0) {
              //停止定时器
              clearInterval(timmer);
              //还原计数器
              this.leftSecond = 0;
              //还原按钮状态
              this.sending = false;
              //将组件的code属性值变为仓库中验证码[验证码直接自己填写了]
              // console.log(this.$store.state.user.code);
            }
          }, 1000);
        } else return;
      } catch (error) {
        alert(error.message);
      }
    },

    //用户注册
    async userRegister(formName) {
      await this.$refs[formName].validate((valid) => {
        if (valid) {
          try {
            // const { phone, code, password, password1 } = this;
            let phone = this.ruleForm.phone;
            let code = this.ruleForm.code;
            let password = this.ruleForm.pass;
            let checkPass = this.ruleForm.checkPass;
            if (password == checkPass) {
              this.$store.dispatch("userRegister", {
                phone,
                code,
                password,
              });
              //注册成功进行路由的跳转
              this.$router.push("/login");
            }
          } catch (error) {
            alert(error.message);
          }
        } else {
          e;
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
/*取消input type="number"后的滚轮*/
/deep/ input::-webkit-outer-spin-button,
/deep/ input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

/deep/ input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

/deep/ .el-button:hover,
.el-button:focus {
  background-color: white;
}

.register-container {
  .register {
    width: 1200px;
    height: 445px;
    border: 1px solid rgb(223, 223, 223);
    margin: 0 auto;

    h3 {
      background: #ececec;
      margin: 0;
      padding: 6px 15px;
      color: #333;
      border-bottom: 1px solid #dfdfdf;
      font-size: 20.04px;
      line-height: 30.06px;

      span {
        font-size: 14px;
        float: right;

        a {
          color: #e1251b;
        }
      }
    }

    .ruleForm {
      margin-top: 40px;
      display: inline-block;
      height: 300px;
      width: 500px;

      .el-form-item {
        display: inline-block;
        width: 100%;
        height: 50px;
        margin-bottom: 10px;
        text-align: center;

        /deep/ .el-form-item__error {
          height: 20px;
          padding-top: 0;
          position: none;

          .el-form-item__content {
            line-height: normal;
          }
        }
      }

      .getcode {
        position: absolute;
        top: 4px;
        margin-left: 2px;
        // height: 40px;
        // width: 80px;
      }

      /deep/ .el-form-item__label {
        padding-right: 5px;
        line-height: 50px;
      }

      /deep/ .el-form-item__content {
        width: 300px;
        height: 50px;
        line-height: 50px;
        text-align: left;
      }

      .agree {
        height: 30px;

        /deep/ .el-form-item__content {
          height: 100%;
          line-height: 30px;
        }

        /deep/ .el-checkbox {
          height: 100%;
        }
      }

      .el-input {
        /deep/ .el-input__inner {
          padding: 10px;
        }

        display: inline-block;
      }

      .el-checkbox__inner {
        background-color: none;
      }

      /deep/ .el-checkbox__label {
        padding-left: 8px;
        color: #606266;
      }

      .btn {
        width: 100%;
        height: 40px;
        outline: none;
        background: #e1251b;
        color: #fff !important;
        display: inline-block;
        font-size: 16px;
      }
    }
  }

  .copyright {
    width: 1200px;
    margin: 0 auto;
    text-align: center;
    line-height: 24px;

    ul {
      li {
        display: inline-block;
        border-right: 1px solid #e4e4e4;
        padding: 0 20px;
        margin: 15px 0;
      }
    }
  }
}
</style>